<template>
  <div 
    :class="[
      'bx-pagination',
      `bx-pagination--${size}`,
      {
        'bx-pagination--simple': simple
      }
    ]"
  >
    <!-- 总数显示 -->
    <div v-if="showTotal" class="bx-pagination__total">
      {{ totalText }}
    </div>

    <!-- 简单模式 -->
    <template v-if="simple">
      <BxButton 
        :disabled="currentPage <= 1"
        @click="handlePrev"
      >
        <BxIcon name="chevron-left" />
      </BxButton>
      
      <div class="bx-pagination__simple-pager">
        <BxInput 
          v-model="inputPage"
          :size="size"
          @keyup.enter="handleJump"
          @blur="handleJump"
        />
        <span class="bx-pagination__simple-separator">/</span>
        <span class="bx-pagination__simple-total">{{ totalPages }}</span>
      </div>
      
      <BxButton 
        :disabled="currentPage >= totalPages"
        @click="handleNext"
      >
        <BxIcon name="chevron-right" />
      </BxButton>
    </template>

    <!-- 完整模式 -->
    <template v-else>
      <!-- 上一页 -->
      <BxButton 
        :disabled="currentPage <= 1"
        @click="handlePrev"
      >
        <BxIcon name="chevron-left" />
        <span v-if="showPrevNext">上一页</span>
      </BxButton>

      <!-- 页码列表 -->
      <div class="bx-pagination__pager">
        <!-- 第一页 -->
        <button
          v-if="showFirstLast && currentPage > 3"
          :class="[
            'bx-pagination__item',
            'bx-glass'
          ]"
          @click="handlePageChange(1)"
        >
          1
        </button>

        <!-- 前省略号 -->
        <span 
          v-if="showFirstLast && currentPage > 4"
          class="bx-pagination__ellipsis"
        >
          ...
        </span>

        <!-- 页码按钮 -->
        <button
          v-for="page in visiblePages"
          :key="page"
          :class="[
            'bx-pagination__item',
            'bx-glass',
            {
              'bx-pagination__item--active': page === currentPage
            }
          ]"
          @click="handlePageChange(page)"
        >
          {{ page }}
        </button>

        <!-- 后省略号 -->
        <span 
          v-if="showFirstLast && currentPage < totalPages - 3"
          class="bx-pagination__ellipsis"
        >
          ...
        </span>

        <!-- 最后一页 -->
        <button
          v-if="showFirstLast && currentPage < totalPages - 2"
          :class="[
            'bx-pagination__item',
            'bx-glass'
          ]"
          @click="handlePageChange(totalPages)"
        >
          {{ totalPages }}
        </button>
      </div>

      <!-- 下一页 -->
      <BxButton 
        :disabled="currentPage >= totalPages"
        @click="handleNext"
      >
        <span v-if="showPrevNext">下一页</span>
        <BxIcon name="chevron-right" />
      </BxButton>

      <!-- 页面跳转 -->
      <div v-if="showQuickJumper" class="bx-pagination__jumper">
        <span>跳至</span>
        <BxInput 
          v-model="inputPage"
          :size="size"
          @keyup.enter="handleJump"
          @blur="handleJump"
        />
        <span>页</span>
      </div>

      <!-- 页面大小选择 -->
      <div v-if="showSizeChanger" class="bx-pagination__size-changer">
        <BxSelect 
          v-model="currentPageSize"
          :size="size"
          @change="handleSizeChange"
        >
          <BxOption 
            v-for="size in pageSizeOptions"
            :key="size"
            :value="size"
            :label="`${size} 条/页`"
          />
        </BxSelect>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import BxButton from '../basic/BxButton.vue'
import BxIcon from '../basic/BxIcon.vue'
import BxInput from '../input/BxInput.vue'

export default {
  name: 'BxPagination',
  components: {
    BxButton,
    BxIcon,
    BxInput
  },
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizeOptions: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    simple: {
      type: Boolean,
      default: false
    },
    showTotal: {
      type: Boolean,
      default: true
    },
    showSizeChanger: {
      type: Boolean,
      default: false
    },
    showQuickJumper: {
      type: Boolean,
      default: false
    },
    showPrevNext: {
      type: Boolean,
      default: true
    },
    showFirstLast: {
      type: Boolean,
      default: true
    }
  },
  emits: ['change', 'showSizeChange'],
  setup(props, { emit }) {
    const currentPage = ref(props.current)
    const currentPageSize = ref(props.pageSize)
    const inputPage = ref('')

    const totalPages = computed(() => {
      return Math.ceil(props.total / currentPageSize.value)
    })

    const totalText = computed(() => {
      const start = (currentPage.value - 1) * currentPageSize.value + 1
      const end = Math.min(currentPage.value * currentPageSize.value, props.total)
      return `共 ${props.total} 条，第 ${start}-${end} 条`
    })

    const visiblePages = computed(() => {
      const pages = []
      const total = totalPages.value
      const current = currentPage.value

      if (total <= 7) {
        // 总页数小于等于7，显示所有页码
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        // 总页数大于7，显示部分页码
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
        } else if (current >= total - 3) {
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          for (let i = current - 2; i <= current + 2; i++) {
            pages.push(i)
          }
        }
      }

      return pages
    })

    const handlePageChange = (page) => {
      if (page < 1 || page > totalPages.value || page === currentPage.value) {
        return
      }
      
      currentPage.value = page
      emit('change', page, currentPageSize.value)
    }

    const handlePrev = () => {
      handlePageChange(currentPage.value - 1)
    }

    const handleNext = () => {
      handlePageChange(currentPage.value + 1)
    }

    const handleJump = () => {
      const page = parseInt(inputPage.value)
      if (!isNaN(page)) {
        handlePageChange(page)
      }
      inputPage.value = ''
    }

    const handleSizeChange = (size) => {
      currentPageSize.value = size
      // 重新计算当前页
      const newPage = Math.min(currentPage.value, Math.ceil(props.total / size))
      currentPage.value = newPage
      emit('showSizeChange', newPage, size)
      emit('change', newPage, size)
    }

    watch(() => props.current, (newVal) => {
      currentPage.value = newVal
    })

    watch(() => props.pageSize, (newVal) => {
      currentPageSize.value = newVal
    })

    return {
      currentPage,
      currentPageSize,
      inputPage,
      totalPages,
      totalText,
      visiblePages,
      handlePageChange,
      handlePrev,
      handleNext,
      handleJump,
      handleSizeChange
    }
  }
}
</script>

<style scoped>
.bx-pagination {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-sm);
  font-family: var(--bx-font-family);
  user-select: none;
}

.bx-pagination--small {
  font-size: 12px;
}

.bx-pagination--medium {
  font-size: 14px;
}

.bx-pagination--large {
  font-size: 16px;
}

.bx-pagination__total {
  color: var(--bx-text-secondary);
  margin-right: var(--bx-spacing-sm);
}

.bx-pagination__pager {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
}

.bx-pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--bx-glass-border);
  border-radius: var(--bx-radius-small);
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  color: var(--bx-text-primary);
  cursor: pointer;
  transition: all var(--bx-transition-medium);
  font-size: inherit;
  font-family: inherit;
}

.bx-pagination--small .bx-pagination__item {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
}

.bx-pagination--large .bx-pagination__item {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
}

.bx-pagination__item:hover {
  border-color: var(--bx-glass-border-hover);
  background: var(--bx-glass-bg-hover);
}

.bx-pagination__item--active {
  background: rgba(0, 122, 255, 0.25);
  border-color: rgba(0, 122, 255, 0.5);
  color: var(--bx-text-primary);
}

.bx-pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--bx-text-tertiary);
  cursor: default;
}

.bx-pagination__simple-pager {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
}

.bx-pagination__simple-pager .bx-input {
  width: 60px;
}

.bx-pagination__simple-separator,
.bx-pagination__simple-total {
  color: var(--bx-text-secondary);
}

.bx-pagination__jumper {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
  color: var(--bx-text-secondary);
  margin-left: var(--bx-spacing-md);
}

.bx-pagination__jumper .bx-input {
  width: 60px;
}

.bx-pagination__size-changer {
  margin-left: var(--bx-spacing-md);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-pagination {
    gap: var(--bx-spacing-xs);
    font-size: 13px;
  }
  
  .bx-pagination__item {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
  }
  
  .bx-pagination__total {
    display: none;
  }
  
  .bx-pagination__jumper,
  .bx-pagination__size-changer {
    display: none;
  }
}
</style>

